<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2-基本图形</title>
    <style>
        .type-div {
            margin-bottom: 10px;
        }

        .type-div span {
            color: #666;
            cursor: pointer;
        }

        .type-div span:hover {
            font-weight: bold;
            color: blue;
        }

        canvas {
            border: 1px solid #eee;
        }
    </style>
</head>

<body>
    <div class="type-div" id="typeDiv">
        <span data-index="1">矩形</span>
        <span data-index="2">线段</span>
        <span data-index="3">三角形</span>
        <span data-index="4">圆</span>
        <span data-index="5">圆弧</span>
        <span data-index="6">二次贝塞尔曲线</span>
        <span data-index="7">三次贝塞尔曲线</span>
        <span data-index="8">椭圆</span>
        <span data-index="9">圆角矩形</span>
        <span data-index="10">SVG Path</span>
    </div>
    <canvas id="canvas" width="500" height="500"></canvas>
    <script type="text/javascript">
        let canvas = document.getElementById("canvas");
        let ctx = canvas.getContext("2d");

        function draw(type) {
            ctx.clearRect(0, 0, 500, 500);
            switch (type) {
                case 1:
                    // 绘制矩形
                    ctx.fillStyle = "rgb(200,0,0)";
                    ctx.fillRect(10, 10, 55, 50);
                    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
                    ctx.fillRect(30, 30, 55, 50);
                    ctx.fillStyle = "rgba(0, 0, 0, 1)";
                    ctx.clearRect(20, 20, 10, 10); // 可做镂空效果
                    ctx.fillStyle = "rgba(0, 0, 0, 1)";
                    ctx.strokeRect(75, 70, 10, 10);
                    break;
                case 2:
                    // 绘制线段
                    ctx.beginPath(); // 新建一条path
                    ctx.moveTo(50, 50); //把画笔移动到指定的坐标
                    ctx.lineTo(200, 50);  //绘制一条从当前位置到指定坐标(200, 50)的直线.
                    // 闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合，则什么都不做
                    ctx.closePath();
                    ctx.stroke(); //绘制路径
                    break;
                case 3:
                    // 绘制三角形
                    ctx.fillStyle = "rgb(0,255,255)";
                    ctx.strokeStyle = "rgb(218,112,214)";
                    ctx.beginPath();
                    ctx.moveTo(100, 100);
                    ctx.lineTo(150, 200);
                    ctx.lineTo(50, 200);
                    ctx.closePath();
                    ctx.stroke();
                    ctx.fill();
                    break;
                case 4:
                    // 圆
                    ctx.beginPath();
                    ctx.arc(50, 50, 50, 0, 2 * Math.PI);
                    ctx.closePath();
                    ctx.fill()
                    break;
                case 5:
                    // 绘制圆弧 ??? todo
                    ctx.beginPath();
                    ctx.moveTo(50, 50);
                    //参数1、2：控制点1坐标   参数3、4：控制点2坐标  参数4：圆弧半径
                    ctx.arcTo(200, 50, 200, 200, 100);
                    // ctx.lineTo(200, 200)
                    ctx.stroke();
                    // 点
                    ctx.beginPath();
                    // ctx.rect(50, 50, 10, 10);
                    ctx.rect(200, 50, 10, 10)
                    ctx.rect(200, 200, 10, 10)
                    ctx.fill()
                    break;
                case 6:
                    // 贝塞尔曲线:绘制二次贝塞尔曲线
                    ctx.beginPath();
                    ctx.moveTo(10, 200); //起始点
                    var cp1x = 40, cp1y = 100;  //控制点
                    var x = 200, y = 200; // 结束点
                    ctx.quadraticCurveTo(cp1x, cp1y, x, y);
                    ctx.stroke();
                    // 点
                    ctx.beginPath();
                    ctx.rect(10, 200, 10, 10);
                    ctx.rect(cp1x, cp1y, 10, 10);
                    ctx.rect(x, y, 10, 10);
                    ctx.fill();
                    break;
                case 7:
                    // 贝塞尔曲线:绘制二次贝塞尔曲线
                    ctx.beginPath();
                    ctx.moveTo(40, 200); //起始点
                    var cp1x = 20, cp1y = 100;  //控制点1
                    var cp2x = 100, cp2y = 120;  //控制点2
                    var x = 200, y = 200; // 结束点
                    //绘制三次贝塞尔曲线
                    ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
                    ctx.stroke();

                    // 点击
                    ctx.beginPath();
                    ctx.rect(40, 200, 10, 10);
                    ctx.rect(cp1x, cp1y, 10, 10);
                    ctx.rect(cp2x, cp2y, 10, 10);
                    ctx.rect(x, y, 10, 10);
                    ctx.fill();
                    break;
                case 8:
                    ctx.beginPath();
                    // ctx.ellipse(100, 100, 20, 50, 0, 0, 0); // x
                    ctx.ellipse(100, 100, 20, 50,0, 0, 2 * Math.PI);
                    ctx.fill();
                    break;
                case 9:
                    ctx.roundRect(12, 12, 150, 150, 15);
                    ctx.fill();
                    break;
                case 10:
                    var path = new Path2D("M10 10 h 80 v 80 h -80 Z");
                    ctx.stroke(path);
                    break;
            }
        }

        draw(1);

        document.querySelector('#typeDiv').addEventListener('click', function (e) {
            let srcElement = e.srcElement
            let { index } = srcElement.dataset
            if (index && srcElement.nodeName === 'SPAN') draw(Number(index))
            console.log(e.srcElement, index, srcElement.nodeName)
        })
        // 封装的一个用于绘制圆角矩形的函数。

        function roundedRect(ctx, x, y, width, height, radius) {
            ctx.beginPath();
            ctx.moveTo(x, y + radius);
            ctx.lineTo(x, y + height - radius);
            ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
            ctx.lineTo(x + width - radius, y + height);
            ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
            ctx.lineTo(x + width, y + radius);
            ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
            ctx.lineTo(x + radius, y);
            ctx.quadraticCurveTo(x, y, x, y + radius);
            ctx.stroke();
        }


    </script>
</body>

</html>